<!--
    create  by Yang
    政府部门大屏右2：48小时未提交医废数据医院列表
-->
<template>
    <div class="uncommitted">
        <thead>
        <tr>
            <th>机构名称</th>
            <th>最后提交时间</th>
            <th>负责人</th>
            <th>负责人电话</th>

        </tr>
        </thead>
        <div class="content">
            <tbody class="anim" @mouseenter="mEnter" @mouseleave="mLeave">
            <tr v-for="(item,index) in dataSource" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                <td>{{item.sectionName}}</td>
                <td>{{item.rubbishName}}</td>
                <td>{{item.weight}}</td>
                <td>{{item.collectionName}}</td>
            </tr>
            </tbody>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'uncommitted',
    data() {
      return {
        animate: false,
        dataSource: [
          // {
          //   sectionName:'德江县青龙街道桥头社区玉林兴苑卫生服务站',
          //   rubbishName:'从未提交医废信息',
          //   weight:'覃磊',
          //   collectionName:'13595697592',
          //
          // },
          {
            sectionName:'妇科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'李四',

          },
          {
            sectionName:'内科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'王五',

          },
          {
            sectionName:'外科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'张一',

          },
          {
            sectionName:'儿科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'胡奥',

          },{
            sectionName:'消化科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'滑动',

          },
          {
            sectionName:'内科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'好的',
          },
          {
            sectionName:'外科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'养殖',
          },
          {
            sectionName:'儿科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'胡一天',
          },{
            sectionName:'消化科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'杨紫',
          },
          {
            sectionName:'儿科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'张三',
          },
          {
            sectionName:'妇科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'李四',
          },
          {
            sectionName:'内科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'王五',
          },
          {
            sectionName:'外科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'张一',
          },
          {
            sectionName:'儿科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'胡奥',
          },{
            sectionName:'消化科',
            rubbishName:'感染性',
            weight:'0.5',
            collectionName:'滑动',
          },
        ],
        activeIndex: 0
      }
    },
    mounted() {
      /*this.getMedicalWasteData();*/
      this.timer1 = setInterval(this.scroll, 1000);
    },
    methods: {
      /*async getMedicalWasteData() {
        let url =  `${window._CONFIG['domianURL']}/hc/hcRecycleRecord/getConstantlyBook`;
        let res = await getAction(url);
        if (res && res.success) {
          this.dataSource = res.result || []
        }
      },*/
      scroll() {
        this.animate = !this.animate
        let that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function() {
          that.dataSource.push(that.dataSource[0])
          that.dataSource.shift()
          that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 1000)
      },
      mEnter() {
        clearInterval(this.timer1)
      },
      mLeave() {
        this.timer1 = setInterval(this.scroll, 1000)
      }
    }

  }
</script>

<style lang="less">
    .anim {
    transition: all 2s;
    }

    .uncommitted {

        thead {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: 0.4rem;
            color: #52E2FF;
            font-size: 0.19rem;
            tr {
                display: table-row;
                vertical-align: inherit;
                text-align: center;

            }
        }

        .content {
            margin-top: 0.005rem;
            width: 100%;
            overflow: hidden;
            color: #FFFFFF;
            text-align: center;

            .off{
                background-color:#00134B;
            }
            .on{

            }
            tbody {

                display: block;
                height: 6.5rem;
                overflow-y: hidden;

                tr {
                    line-height: 0.6rem;
                    display: table;
                    width: 100%;
                    table-layout: fixed;
                }
            }

        }

    }
</style>
